<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/css_reset.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header_top">
                <h1>
                    <a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png" alt=""></a>
                </h1>
                <ul class="big_nav">
                    <li><a href="#">音乐馆</a></li>
                    <li><a href="#">我的音乐</a></li>
                    <li><a href="#">客户端</a></li>
                    <li><a href="#">开放平台</a></li>
                    <li><a href="#">VIP</a></li>
                </ul>

                <input type="search" placeholder="搜索音乐、MV、歌单、用户">
                <a href="#"><i class="icon"></i></a>
                <a href="#" class="login">
                    <p>登录</p>
                </a>
                <ul class="vip">
                    <li>开通VIP<i></i>
                        <ul class="vip1">
                            <li>开通绿钻豪华版</li>
                            <li>开通付费包</li>
                        </ul>
                    </li>
                </ul>
                <ul class="recharge">
                    <li>充值<i></i>
                        <ul class="recharge1">
                            <li>充值乐币</li>
                            <li>充值饭票</li>
                        </ul>
                    </li>
                </ul>

            </div>
            <div class="header_bottom">
                <ul>
                    <li><a href="/index.html">首页</a></li>
                    <li><a href="/singer1.html">歌手</a></li>
                    <li><a href="/songdisc.html">新碟</a></li>
                    <li><a href="/Ranking_list.html">排行榜</a></li>
                    <li><a href="/classify.html">分类歌单</a></li>
                    <li><a href="/radio_station.html">电台</a></li>
                    <li><a href="/mv.html">MV</a></li>
                    <li><a href="/Digital_album.html">数字专辑</a></li>
                    <li><a href="#">票务</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="indexbodyer">
        <div class="gedan">
            <h1>歌单推荐</h1>
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <ul>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb1.jpg" alt=""></div>
                                    <h5>官方精选：小鬼-王琳凯 Lil Ghost</h5>
                                </a></li>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb2.jpg" alt=""></div>
                                    <h5>欧美流行向｜爱于前奏 死于高潮</h5>
                                </a></li>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb3.jpg" alt=""></div>
                                    <h5>轻柔小众 | 愿你遇见所有的甜</h5>
                                </a></li>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb4.jpg" alt=""></div>
                                    <h5>十指一弹爽心曲，一心奏出世人心</h5>
                                </a></li>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb5.png" alt=""></div>
                                    <h5>深情翻唱 | 都说入戏的人最深情</h5>
                                </a></li>
                        </ul>
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="item">
                        <ul>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb6.jpg" alt=""></div>
                                    <h5>上分必备|身法操作不可少的BGM</h5>
                                </a></li>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb7.jpg" alt=""></div>
                                    <h5>100首精选粤语歌</h5>
                                </a></li>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb8.jpg" alt=""></div>
                                    <h5>400首欧美动感热曲</h5>
                                </a></li>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb9.jpg" alt=""></div>
                                    <h5>国产嘻哈:rap高能时刻！</h5>
                                </a></li>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb10.jpg" alt=""></div>
                                    <h5>一秒倾心的神仙歌曲</h5>
                                </a></li>
                        </ul>
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="item">
                        <ul>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb11.jpg" alt=""></div>
                                    <h5>治愈纯音乐 | 所遇皆温柔 ♡</h5>
                                </a></li>
                            <li><a href=""><p><i></i></p><div class="imgdiv"><img src="/images/lb12.jpg" alt=""></div>
                                    <h5>巴洛克丨提高学习能力的古典音乐</h5>
                                </a></li>
                        </ul>
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div class="newmusic">
            <h1>新歌首发</h1>
            <!-- <div>
                <ul class="musicnav">
                    <li><a href="##carousel-example-generictian" data-target="#carousel-example-generictian" data-toggle="tab">最新</a></1i>
                    <li><a href="##carousel-example-generictian" data-target="#carousel-example-generictian" data-toggle="tab">最热</a></1i>
                </ul>
            </div> -->
            <div id="carousel-example-generictian" class="carousel slidetian" data-ride="carousel">
                <!-- Indicators -->
                <!-- <ol class="carousel-indicators">
                  <li data-target="#carousel-example-generictian" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generictian" data-slide-to="1"></li>
                </ol> -->

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox" id="one">
                    <div class="item active" id="one"> 
                        <ul class="one">
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb13.jpg" alt=""></div>
                                    <h5>故人不远《古剑奇谭木语人》</h5><span>HITA</span>
                                </a>
                            </li>
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb14.jpg" alt=""></div>
                                    <h5>让青春撒一次野 (舒楠监制 官方)</h5><span>张赫宣</span>
                                </a>
                            </li>
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb15.jpg" alt=""></div>
                                    <h5>눈치없긴 (Feat. 유주)</h5><span>San E (산이) /俞宙 (유주)</span>
                                </a>
                            </li>
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb16.jpg" alt=""></div>
                                    <h5>WHY Y (Feat. Tiger JK)</h5><span>BIBI (비비) /Tiger JK (타이거 J</span>
                                </a>
                            </li>
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb17.jpg" alt=""></div>
                                    <h5>아마추어 (业余)</h5><span>尹钟信 (윤종신)</span>
                                </a>
                            </li>
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb18.jpg" alt=""></div>
                                    <h5>玉人歌</h5><span>陈粒</span>
                                </a>
                            </li>
                        </ul>
                        <!-- <div class="carousel-caption">
                        </div> -->
                    </div>
                    <div class="item">
                        <ul class="two">
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb19.jpg" alt=""></div>
                                    <h5>一万次相遇《循环初恋》影视剧</h5><span>李紫婷</span>
                                </a>
                            </li>
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb20.jpg" alt=""></div>
                                    <h5>对峙《怒火重案》电影主题曲</h5><br /><span>谢霆锋</span>
                                </a>
                            </li>
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb21.jpg" alt=""></div>
                                    <h5>奉陪到底</h5><br /><span>刘德华</span>
                                </a>
                            </li>
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb22.jpg" alt=""></div>
                                    <h5>Happier Than Ever (Explicit)</h5><span>Billie Eilish</span>
                                </a>
                            </li>
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb23.jpg" alt=""></div>
                                    <h5>绒花</h5><span>焦迈奇</span>
                                </a>
                            </li>
                            <li>
                                <a href=""><p><i></i></p><div class="imgdiv1"><img src="/images/lb24.jpg" alt=""></div>
                                    <h5>赤色</h5><span>李鑫一</span>
                                </a>
                            </li>
                        </ul>
                        <!-- <div class="carousel-caption">
                            ...
                        </div> -->
                    </div>
                    ...
                </div>

                <!-- Controls -->
                <a class="left carousel-control1" href="#carousel-example-generictian" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control2" href="#carousel-example-generictian" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="tuijian">
            <h1>精彩推荐</h1>
            <div class="abon">
                <div class="bon">
                    <div>
                        <ul class="bont">
                            <li>
                                <ul class="aa">
                                    <li><a href=""><img src="/images/a1.jpg" alt=""></a></li>
                                    <li><a href=""><img src="/images/a2.jpg" alt=""></a></li>
                                </ul>
                            </li>
                            <li>
                                <ul class="bb">
                                    <li><a href=""><img src="/images/a3.jpg" alt=""></a></li>
                                    <li><a href=""><img src="/images/a4.jpg" alt=""></a></li>
                                </ul>
                            </li>
                            <li>
                                <ul class="cc">
                                    <li><a href=""><img src="/images/a1.jpg" alt=""></a></li>
                                    <li><a href=""><img src="/images/a2.jpg" alt=""></a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="ranking_list_container">
        <div class="ranking_list_content">
            <h2>排行榜</h2>
            <ul>
                <li class="toplist_bg_container">
                    <div class="toplist_bg">
                        <div class="toplist__head">
                            <p><i class="toplist_i"></i></p>
                            <h3>巅峰榜</h3>
                            <a href="#">热歌</a>
                        </div>
                        <i></i>
                        <ul class="toplist_songlist">
                            <li>
                                <div>1 不如</div>
                                <div>秦海清</div>
                            </li>
                            <li>
                                <div>2 星辰大海</div>
                                <div>黄霄云</div>
                            </li>
                            <li>
                                <div>3 放空</div>
                                <div>A1 TRIP/大籽/Lil E</div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="toplist_bg_container">
                    <div class="toplist_bg">
                        <div class="toplist__head">
                            <p><i class="toplist_i"></i></p>
                            <h3>巅峰榜</h3>
                            <a href="#">新歌</a>
                        </div>
                        <i></i>
                        <ul class="toplist_songlist">
                            <li>
                                <div>1 骁</div>
                                <div>时代少年团</div>
                            </li>
                            <li>
                                <div>2 时光背面的我</div>
                                <div>刘至佳/韩瞳</div>
                            </li>
                            <li>
                                <div>3 我喜欢你</div>
                                <div>时代少年团</div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="toplist_bg_container">
                    <div class="toplist_bg">
                        <div class="toplist__head">
                            <p><i class="toplist_i"></i></p>
                            <h3>巅峰榜</h3>
                            <a href="#">流行指数</a>
                        </div>
                        <i></i>
                        <ul class="toplist_songlist">
                            <li>
                                <div>1 我喜欢你</div>
                                <div>时代少年团</div>
                            </li>
                            <li>
                                <div>2 骁</div>
                                <div>井胧/井迪儿</div>
                            </li>
                            <li>
                                <div>3 解药</div>
                                <div>来一碗老于</div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="toplist_bg_container">
                    <div class="toplist_bg">
                        <div class="toplist__head">
                            <p><i class="toplist_i"></i></p>
                            <h3>巅峰榜</h3>
                            <a href="#">欧美</a>
                        </div>
                        <i></i>
                        <ul class="toplist_songlist">
                            <li>
                                <div>1 Stay (Explicit)</div>
                                <div>Justin Bieber</div>
                            </li>
                            <li>
                                <div>2 the lakes</div>
                                <div>Taylor Swift</div>
                            </li>
                            <li>
                                <div>3 California</div>
                                <div>王嘉尔</div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="toplist_bg_container">
                    <div class="toplist_bg">
                        <div class="toplist__head">
                            <p><i class="toplist_i"></i></p>
                            <h3>巅峰榜</h3>
                            <a href="#">日韩</a>
                        </div>
                        <i></i>
                        <ul class="toplist_songlist">
                            <li>
                                <div>1 Alcohol-Free</div>
                                <div>TWICE</div>
                            </li>
                            <li>
                                <div>2 My love</div>
                                <div>D.O.</div>
                            </li>
                            <li>
                                <div>3 Rose</div>
                                <div>D.O. (都暻秀)</div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="footerbodyer">
        <div>
            <div class="footerleft">
                <div>
                    <h4>下载QQ音乐客户端</h4>
                </div>
                <div>
                    <ul class="icons">
                        <a href="#">
                            <li>
                                <p>PC版</p>
                            </li>
                        </a>
                        <li>
                            <p>Mac版</p>
                        </li>
                        <li>
                            <p>Android版</p>
                        </li>
                        <li>
                            <p>iphone版</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3>开放平台</h3>
                    <ul class="icons1">
                        <li><a href="">QQ音乐开放平台</a></li>
                        <li><a href="">腾讯音乐人</a></li>
                    </ul>
                </div>
            </div>
            <div class="footermiddle">
                <div>
                    <h4>特色产品</h4>
                </div>
                <div>
                    <ul class="iconss">
                        <li>
                            <p>全民k歌</p>
                        </li>
                        <li>
                            <p>Super&nbsp;Sound</p>
                        </li>
                        <li>
                            <p>Qplay</p>
                        </li>
                        <li>
                            <p>Fan直播伴侣</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3>TME集团官网</h3>
                    <ul class="icons2">
                        <li><a href="">腾讯音乐</a></li>
                    </ul>
                </div>
            </div>
            <div class="footerright">
                <h4>合作链接</h4>
                <div class="iconsss">
                    <ul>
                        <li><a href="">CJ&nbsp;ENM</a></li>
                        <li><a href="">最新版QQ</a></li>
                        <li><a href="">QQ浏览器</a></li>
                        <li><a href="">企鹅FM</a></li>
                        <li><a href="">手机QQ空间</a></li>
                        <li><a href="">电脑管家</a></li>
                    </ul>
                    <ul>
                        <li><a href="">腾讯视频</a></li>
                        <li><a href="">腾讯社交广告</a></li>
                        <li><a href="">腾讯微云</a></li>
                        <li><a href="">智能电视网</a></li>
                        <li><a href="">腾讯云</a></li>
                        <li><a href="">当贝市场</a></li>
                    </ul>
                </div>
            </div>
            <div class="footerfooter">
                <ul class="footerlist1">
                    <li><a href="">关于腾讯|</a></li>
                    <li><a href="">About&nbsp;Tencent|</a></li>
                    <li><a href="">服务条款|</a></li>
                    <li><a href="">用户服务协议|</a></li>
                    <li><a href="">隐私政策|</a></li>
                    <li><a href="">权利声明|</a></li>
                    <li><a href="">广告服务|</a></li>
                    <li><a href="">腾讯招聘|</a></li>
                    <li><a href="">客服中心|</a></li>
                    <li><a href="">网站导航</a></li>
                </ul>
                <h5>Copyright © 1998 - 2021 Tencent. All Rights Reserved.</h5>
                <h5>腾讯公司 版权所有 网络文化经营许可证:<a href="">粤网文[2018]6725-2386号</a></h5>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</body>

</html>